<template>
	<view>
		<view class="operation-record">
			<view class="record-top">
				<!-- 类型 -->
				<view class="select-type" @click="typeToggleShow">
					<text class="type-text">{{ typeClick.text}}</text>

					<u-icon size="10" :name="typeShow?'arrow-up-fill':'arrow-down-fill'"></u-icon>
					<view class="hide" v-show="typeShow">
						<view class="hideText" v-for="(item,index) in siftTypeList" :key="item"
							@click.stop="changeType(item)">
							{{ item.text }}
						</view>
					</view>
				</view>
				<!-- 执行状态 -->
				<view class="select-state" @click="stateToggleShow">
					<text class="state-text">{{ statusClick.text }}</text>

					<u-icon size="10" :name="stateShow?'arrow-up-fill':'arrow-down-fill'"></u-icon>
					<view class="hide-state" v-show="stateShow">
						<view class="hideState-text" v-for="i in executeStateLiat" :key="i" @click.stop="getState(i)">
							{{ i.text }}
						</view>
					</view>
				</view>
				<!-- 搜索框 -->
				<view class="search">
					<u-search class="u-search" shape="square" placeholder="请输入" height="30" :showAction="false"
						v-model="keyword"></u-search>
				</view>
			</view>


			<!-- 作业列表 -->
			<scroll-view scroll-y id="scrollContainer" @scroll.passive="handleScroll">
				<view :style="{'padding-top':`${testIndex>0?testIndex*testH:0}rpx`}">

				</view>
				<view class="record-list" v-show="index>testIndex-4&&index<testEndIndex+testIndex+4"
					v-for="(i,index) in searchRecordList" :key="index">
					<view class="list-top">
						<text class="name">{{i.airName}}</text>
						<text class="state">{{executeStateLiat[i.status+1].text}}</text>
					</view>
					<view class="list-line"></view>
					<view class="list-bottom">
						<view class="list-icon">
							<image :src="siftTypeList[i.airType+1].icon"></image>
						</view>
						<view class="list-text">
							<view class="list-type">
								<view>{{siftTypeList[i.airType+1].text}}</view>
								<view>类型</view>
							</view>
							<view class="list-plan">
								<view>{{i.plan_at}}</view>
								<view>计划时间</view>
							</view>
							<view class="list-execute">
								<view>{{i.execute_at}}</view>
								<view>执行时间</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	import {
		getQueryAirlineRecordFlyResult
	} from "../../api/index.js"
	import {
		filterDate
	} from "../../utils/filterDate.js"
	export default {
		data() {
			return {
				testEndIndex: 0,
				testIndex: 0,
				testH: 256,
				// 类型
				typeShow: false,
				typeClick: {
					text: "类型",
					id: -1
				},

				siftTypeList: [{
						text: '全部',
						id: -1
					},
					{
						text: '航线',
						icon: '/static/svg/airline.svg',
						id: 0
					}, {
						text: '全景',
						icon: '/static/svg/full-view.svg',
						id: 1
					}, {
						text: '正射',
						icon: '/static/svg/orthographic.svg',
						id: 2
					}, {
						text: '三维',
						icon: '/static/svg/threeDimensional.svg',
						id: 3
					},
				],
				// 执行状态
				stateShow: false,
				statusClick: {
					text: '状态',
					id: -1
				},
				executeStateLiat: [{
					text: '全部',
					id: -1
				}, {
					text: '计划',
					id: 0
				}, {
					text: '执行准备',
					id: 1
				}, {
					text: '执行中',
					id: 2
				}, {
					text: '执行完毕',
					id: 3
				}, {
					text: '执行失败',
					id: 4
				}, {
					text: '数据下载中',
					id: 5
				}, {
					text: '数据下载完毕',
					id: 6
				}, {
					text: '数据下载异常',
					id: 7
				}, ],
				// 搜索
				keyword: '',
				// 作业记录数据
				recordList: [],

			};
		},

		onShow() {

			getQueryAirlineRecordFlyResult(this.mechineEvent.nestId).then(res => {
				const {
					data: {
						data: {
							airlineList
						}
					}
				} = res
				let arr = JSON.parse(JSON.stringify(airlineList))

				arr = arr.filter(item => item.exec_record_arr.length > 0)
				let filterArr = []
				arr.forEach(ele => {
					filterArr.push(...ele.exec_record_arr.map(item => {

						item.plan_at = item.plan_at ? filterDate(item.plan_at, 3) : 0
						item.execute_at = item.execute_at ? filterDate(item.execute_at, 3) : 0
						Object.assign(item, {
							airType: ele.type,
							airName: ele.name

						})
						return item
					}))

				})
				this.recordList = filterArr
				console.log(filterArr)
			})
		},
		mounted() {
			let view = uni.createSelectorQuery().select("#scrollContainer")
			console.log(view, 'view')
			view.boundingClientRect((data) => {
				this.testEndIndex = Math.ceil(data.height * 2 / this.testH) + 3
				console.log(this.testEndIndex, '<=this.testEndIndex')
			}).exec()
		},
		computed: {
			...mapState(["mechineEvent"]),
			searchRecordList() {
				let arr = JSON.parse(JSON.stringify(this.recordList))

				arr = arr.filter((i) => {
					// if (!this.typeClick.includes("类型") && !this.statusClick.includes("状态")) {
					// 	return i.name.includes(this.keyword) && i.type === this.typeClick && i.state === this
					// 		.statusClick
					// } else if (this.typeClick.includes("类型") && !this.statusClick.includes("状态")) {
					// 	return i.name.includes(this.keyword) && i.state === this
					// 		.statusClick
					// } else if (!this.typeClick.includes("类型") && this.statusClick.includes("状态")) {
					// 	return i.name.includes(this.keyword) && i.type === this
					// 		.typeClick
					// } else {
					// 	return i.name.includes(this.keyword)
					// }
					if (this.typeClick.id === -1 && this.statusClick.id === -1) {
						return i.airName.includes(this.keyword)
					} else if (this.typeClick.id !== -1 && this.statusClick.id !== -1) {
						return i.airName.includes(this.keyword) && i.status === this.statusClick.id && i
							.airType ===
							this
							.typeClick.id
					} else if (this.typeClick.id === -1 && this.statusClick.id !== -1) {
						return i.airName.includes(this.keyword) && i.status === this.statusClick.id
					} else if (this.typeClick.id !== -1 && this.statusClick.id === -1) {
						return i.airName.includes(this.keyword) && i.airType === this.typeClick.id
					}

				})
				return arr
			},

		},
		methods: {
			// -----------------------------------------------
			// 计算容器的最大容积，onReady中触发，即初次渲染时触发
			handleScroll(e) {
				this.testIndex = Math.floor((e.detail.scrollTop * 2) / this.testH) - 3
				console.log(e.detail.scrollTop, this.testIndex)
			},
			// -----------------------------------------------
			// scroll(event) {
			// 	this.showNum = Math.ceil(event.detail.scrollTop + uni.getSystemInfoSync().screenHeight) * 2
			// 	console.log(this.showNum)
			// },
			// 获取类型
			changeType(item) {
				this.typeClick = item
				this.typeShow = false
			},
			// 获取执行状态
			getState(item) {
				this.statusClick = item
				this.stateShow = false
			},
			typeToggleShow() {
				this.typeShow = !this.typeShow
				this.stateShow = false
			},
			stateToggleShow() {
				this.stateShow = !this.stateShow
				this.typeShow = false
			},
		}
	}
</script>

<style lang="scss">
	#scrollContainer {
		box-sizing: border-box;
		margin-top: 20rpx;
		height: calc(100vh - 100rpx);

	}

	.operation-record {
		padding-top: 20rpx;
		box-sizing: border-box;


		.record-top {
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			box-sizing: border-box;
			padding: 0 40rpx;

			.select-type {
				margin-right: 20rpx;
				width: 176rpx;
				height: 100%;
				border-radius: 10rpx;
				box-shadow: 0px 0px 6rpx 0px rgba(0, 0, 0, 0.25);
				display: flex;
				justify-content: center;
				align-items: center;

				.type-text {
					color: #000;
					font-size: 30rpx;
					width: 96rpx;
					text-align: center;
				}



				.hide {
					position: absolute;
					width: 176rpx;
					top: 84rpx;
					z-index: 2;
					background-color: white;
					box-shadow: 0px 0px 6rpx 0px rgba(0, 0, 0, 0.25);
					border-radius: 10rpx;

					.hideText {

						padding: 16rpx 10rpx;
						font-size: 30rpx;
					}
				}
			}

			.select-state {
				margin-right: 20rpx;
				width: 220rpx;
				height: 100%;
				border-radius: 10rpx;
				background: #FFF;
				box-shadow: 0px 0px 6rpx 0px rgba(0, 0, 0, 0.25);
				display: flex;
				justify-content: center;
				align-items: center;

				.state-text {
					color: #000;
					font-size: 30rpx;
					width: 96rpx;
					text-align: center;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; //溢出不换行
				}


				.hide-state {
					position: absolute;
					width: 220rpx;
					top: 84rpx;
					z-index: 2;
					background-color: white;
					box-shadow: 0px 0px 6rpx 0px rgba(0, 0, 0, 0.25);
					border-radius: 10rpx;

					.hideState-text {
						padding: 16rpx 10rpx;
						font-size: 30rpx;
					}
				}
			}


			// 搜索
			.search {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.u-search {
					border-radius: 10rpx;
				}

				image {
					height: 60rpx;
					width: 60rpx;
				}
			}
		}



		// 作业记录列表
		.record-list {
			height: 226rpx;
			box-shadow: 0px 6rpx 16rpx 0px rgba(0, 0, 0, 0.25);
			border-radius: 10rpx;
			box-sizing: border-box;
			margin: 30rpx 40rpx 0;

			&:first-child {
				margin-top: 10rpx;

			}

			.list-top {
				display: flex;
				justify-content: space-between;
				// 上右下左
				padding: 20rpx 20rpx;
				align-items: center;

				.name {
					color: #000;
					text-align: center;
					font-family: Inter;
					font-size: 36rpx;
					font-style: normal;
					font-weight: 400;
					line-height: normal;

				}

				.state {
					color: #000;
					text-align: center;
					font-family: Inter;
					font-size: 24rpx;
					font-style: normal;
					font-weight: 400;
					line-height: normal;

				}
			}

			.list-line {
				margin: 0 20rpx;
				height: 2rpx;
				box-sizing: border-box;
				border-radius: 4rpx;
				background: $color-gray;
			}

			.list-bottom {
				display: flex;
				margin-top: 24rpx;

				.list-icon {
					width: 120rpx;
					height: 120rpx;

					image {
						width: 70%;
						height: 70%;
					}

					margin-left:30rpx;
				}

				.list-text {
					flex: 1;
					display: flex;
					justify-content: space-between;
					// 上右下左
					padding: 0px 40rpx;
					text-align: center;

					>view {
						display: flex;
						flex-direction: column;
						align-items: center;

						>view:first-child {
							height: 38rpx;
							display: flex;
							align-items: center;
							font-size: 24rpx;

						}

						&:first-child {
							view:first-child {
								font-size: 32rpx;
							}
						}

						>view:last-child {
							font-size: 12px;
							color: #B1B1B1;
							margin-top: 7px;
						}
					}


				}
			}
		}


	}
</style>